<%@ page language="java" errorPage="/WEB-INF/pages/errors/error.jsp"
	pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator"
	prefix="decorator"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page"%>
<%@ include file="/common/taglibs.jsp"%>

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<%--
<c:import url="/common/header.jsp" />
<c:import url="/common/meta.jsp" />
 --%>
<link href="${baseurl}lianliankan/resources/css/style.css"
	type="text/css" rel="stylesheet" />
<link href="${baseurl}lianliankan/resources/css/weblink.css"
	type="text/css" rel="stylesheet" />
<script src="${baseurl}resource/js/jquery-1.7.1.min.js"
	type="text/javascript"></script>
<script
	src="${baseurl}lianliankan/resources/js/modernizr-transitions.js"></script>
<script src='${baseurl}dwr/interface/dwrAction.js'></script>
<script src='${baseurl}dwr/engine.js'></script>
<script src='${baseurl}dwr/util.js'></script>
<title>得想个名啊~~</title>
</head>


<head>

<script type="text/javascript">
	$(document).ready(function() {
		$('.menubar').bind({

			mouseenter : function() {

				$(this).delay(300).animate({
					height : 400
				}, 100, function() {

					$('.menubar .tag').fadeIn();

				});

			},

			mouseleave : function() {
				$('.menubar .tag').fadeOut('fast',function() {
					$('.menubar').animate({
						height : 20
					}, 100);
				});

			}

		});
		/*
		$('.box').each(function(index) {
			$(this).click(function() {

				$('.link_ctn').fadeIn();
			})

		})
		*/
		$('.link_ctn_bg').click(function() {
			$('.link_ctn').fadeOut();
		})
		$('.link_ctn_info').bind('mousewheel DOMMouseScroll', function(e) {
		    var scrollTo = null;

		    if (e.type == 'mousewheel') {
		        scrollTo = (e.originalEvent.wheelDelta * -1);
		    }
		    else if (e.type == 'DOMMouseScroll') {
		        scrollTo = 40 * e.originalEvent.detail;
		    }

		    if (scrollTo) {
		        e.preventDefault();
		        $(this).scrollTop(scrollTo + $(this).scrollTop());
		    }
		});
		
	});

	function link_ctn_close() {
		$('.link_ctn_bg').fadeTo('fast','1',function(){
		$('.link_ctn').fadeOut(function(){
			$('#container').removeClass('stop_scroll');
			$('#imgs').html('');
		});
		});
	}
	/* background image */
	window.onload = function() {
		$('#bg').fadeIn('slow');
		FullScreenBackground('#bgimg');
	}
	$(window).resize(function() {
		FullScreenBackground('#bgimg');
	});
	function FullScreenBackground(theItem) {
		var winWidth = $(window).width();
		var winHeight = $(window).height();
		var imageWidth = $(theItem).width();
		var imageHeight = $(theItem).height();
		var picHeight = imageHeight / imageWidth;
		var picWidth = imageWidth / imageHeight;

		$('.down').css('width', $('.up').width());
		if ((winHeight / winWidth) < picHeight) {
			$(theItem).css("width", winWidth);
			$(theItem).css("height", picHeight * winWidth);
		} else {
			$(theItem).css("height", winHeight);
			$(theItem).css("width", picWidth * winHeight);
		}
		;
		$(theItem).css("margin-left", winWidth / 2 - $(theItem).width() / 2);
		$(theItem).css("margin-top", winHeight / 2 - $(theItem).height() / 2);
	}
	
	function detail(itemid,name,url,score,digest){
		 
		var f = new Object();
		f.itemid=itemid;
		
		dwrAction.llk_detail(f,function (result){
			
			for(var i =0 ;i<result.length;++i){
				imgCount = result.length;
				currentID = i+1;
				$('#imgs').append('<div class="img" id="item-'+i+'"><img  src="'+result[i].value+'" width="60%" height="60%" alt="img"><br><a href="javascript:void(0);" onclick="prev_img('+i+','+imgCount+')" > -向前</a>&nbsp;'+currentID+' | '+imgCount+'&nbsp;<a href="javascript:void(0);" onclick="next_img('+i+','+imgCount+')" >向后+</a></div>');
				
					$('#item-0').fadeIn('fast');
					
				
				}
				
			});
		
		$("#link_bloc").html(name+'&nbsp<a id="l_name" target="_blank" href="'+url+'">'+url+'</a><span class="score"><img src="resources/imgs/like.png" width="20">&nbsp;'+score+'</span>');
		$("#digest").text(digest);
		$('.link_ctn').fadeIn(function(){
			$('.link_ctn_bg').fadeTo('slow','0.8');
		});
	}
	function next_img(e,countNum){
		if(e+1==countNum){
			$('#item-'+e).fadeOut('fast',function(){
				$('#item-0').fadeIn('fast');
			});
			
		}else{
		nextID = e+1;
		$('#item-'+e).fadeOut('fast',function(){
			$('#item-'+nextID).fadeIn('fast');
		});
		}
	}
	function prev_img(e,countNum){
		if(e==0){
			lastID = countNum-1;
			$('#item-'+e).fadeOut('fast',function(){
				$('#item-'+lastID).fadeIn('fast');
			});
			
		}else{
		prevID = e-1;
		$('#item-'+e).fadeOut('fast',function(){
			$('#item-'+prevID).fadeIn('fast');
		});
		}
	}
</script>
</head>

<body>
	<div class="link_ctn">
		<div class="ctn_close">
			<a href="javascript:void(0)" onclick="link_ctn_close()">关闭窗口</a>
		</div>
		<div class="link_ctn_bg"></div>
		<div class="link_ctn_info">
			<div class="ctn_left">
				<div id="imgs"></div>
				<div class="link_bloc" id="link_bloc">
					
				</div>

				<p id="digest"></p>
			</div>

			<div class="ctn_right">
				<div class="tag">
					<h3>标签:</h3>
					<c:forEach items="${tags}" var="tag">
						<a href="tag.html?tag=" onclick="encodeZH(this)"><c:out value="${tag.tag}" /></a>
					</c:forEach>
				</div>
			</div>
		</div>
	</div>
	<!--<div id="bg"><img ondragstart='self.event.returnValue=false' src="resources/imgs/bg.jpg" width="1920" height="1080" id="bgimg" alt="" ></div>-->
	<div class="menubar">
		<div class="tag">
		<c:forEach items="${tags}" var="tag">
			<a href="tag.html?tag=" onclick="encodeZH(this)"><c:out value="${tag.tag}" /></a>
		</c:forEach>
		</div>
		<div class="menubar_btn">
			<a href="javascript:void(0)">进行过滤</a>
		</div>
	</div>
	<div id="container"
		class="transitions-enabled centered infinite-scroll clearfix">
		<c:forEach items="${items}" var="it">
			<div class="box col3" onclick="detail(${it.itemid},'${it.name}','${it.url}','${it.score}','${it.digest}')">
				<p><img src="${it.thumb}"></p>
				<div class="link_bloc">
					${it.name} <span class="score"><img src="resources/imgs/like.png" width="20"> ${it.score}</span>
				</div>
			</div>
		</c:forEach>
		
	</div>
	<!-- #container -->
	<%--<c:set value="${pageinfo.pageNo}" var="page" />--%>
	
	<%--<c:if test="${page < pageinfo.pageCount }">--%>
		<%--<c:set value="${page+1}" var="page"/>--%>
		<!-- 这里正常不需要判断语句 js自己判断-->
		<nav id="page-nav">
			<a href="./category.html?categoryid=${category.categoryid}&page=1"></a>
		</nav>
		
	<%--</c:if> --%>
	
	<script src="resources/js/jquery.masonry.js"></script>
	<script src="resources/js/jquery.infinitescroll.min.js"></script>
	<script>
		$(function() {

			var $container = $('#container');
			$container.imagesLoaded(function() {
				$container.masonry({
					itemSelector : '.box',
					columnWidth : 80,
					isAnimated : !Modernizr.csstransitions,
					isFitWidth : true
				});
			});
			$container.infinitescroll({
				navSelector : '#page-nav', // selector for the paged navigation 
				nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
				itemSelector : '.box', // selector for all items you'll retrieve
				loading : {
					finishedMsg : '已经到达尾页',
					img : 'http://i.imgur.com/6RMhx.gif'
				}
			},
			// trigger Masonry as a callback
			function(newElements) {
				// hide new items while they are loading
				var $newElems = $(newElements).css({
					opacity : 0
				});
				// ensure that images load before adding to masonry layout
				$newElems.imagesLoaded(function() {
					// show elems now they're ready
					$newElems.animate({
						opacity : 1
					});
					$container.masonry('appended', $newElems, true);
				});
			});

		});
	</script>

</body>
</html>